<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsplumb/2.x.x/js/jsplumb.min.js"></script>  
</head>
<body>
<div id="item1" class="draggable">Item 1</div>  
<div id="item2" class="draggable">Item 2</div>  
<script>
// 初始化jsPlumb  
jsPlumb.ready(function() {  
    // 使元素可拖拽  
    jsPlumb.draggable($('.draggable'));  
  
    // 创建端点  
    jsPlumb.addEndpoint('item1', {  
        anchor: "Right",  
        endpoint: "Dot"  
    });  
  
    jsPlumb.addEndpoint('item2', {  
        anchor: "Left",  
        endpoint: "Dot"  
    });  
  
    // 连接两个元素  
    jsPlumb.connect({  
        source: 'item1',  
        target: 'item2',  
        type: "Straight",  
        paintStyle: { stroke: "#5c96bc", strokeWidth: 2 },  
        endpointStyle: { fill: "#5c96bc", radius: 4 },  
        overlays: [  
            ["Arrow", { width: 12, length: 12, location: 1 }]  
        ]  
    });  
});</script></body>